import './login.less'
import loginCss from './login.module.scss'
import initLoginBg from './init'
import { ChangeEvent, useEffect, useState } from 'react'
import { Input, Space, Button } from 'antd';
import { getCaptchaImageAPI, postLoginAPI } from '@/api/login';
import { useDispatch } from 'react-redux';
import { getUserInfo } from '@/store/modules/user';
import { useNavigate } from 'react-router-dom';


function Login() {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    // 渲染完毕调用
    useEffect(() => {
        initLoginBg()
        getCaptcha()     
        window.onresize = function(){initLoginBg()}
    },[])
    // 用户名
    const [userName, setUserName] = useState('')
    const userNameChange = (e: ChangeEvent<HTMLInputElement>) => {
        setUserName(e.target.value)
    }
     // 密码
    const [userPassword, setUserPassword] = useState('')
    const userPasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
        setUserPassword(e.target.value)
    }
    // 验证码
    const [captcha, setCaptcha] = useState('')
    const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
        setCaptcha(e.target.value)
    }
    // 登录按钮
    const gotoLogin = async () => {
        console.log(userName,userPassword,captcha);
        if(!userName.trim() || !userPassword.trim() || captcha.trim()){
            alert('请输入完整')
            return
        }else{
            const data: LoginAPIReq = {
                username:userName, 
                password:userPassword, 
                code:captcha, 
                uuid:captchaUuid
            }
            const res = await postLoginAPI(data)
            dispatch(getUserInfo(res.data))
            navigate('/')
            setUserName('')
            setUserPassword('')
            setCaptcha('')
            captchaUuid = ''
        }
    }

    // 获取验证码图片
    const [captchaImg, setCaptchaImg] = useState('')
    let captchaUuid: string = ''
    const getCaptcha = async () => {
        const res = await getCaptchaImageAPI()
        console.log(res);
        setCaptchaImg('data:image/gif;base54' + res.img)
        captchaUuid = res.uuid
        console.log(captchaUuid); 
    }
    
    return (
        <div className={loginCss.loginPage}>
            <canvas id='canvas' style={{display:"block"}}></canvas>
            <div className={`${loginCss.loginBox} loginbox`}>
                {/* 标题 */}
                <div className={loginCss.title}>
                    <h1>React后台管理系统</h1>
                    <p>hello</p>
                </div>
                {/* 表单部分 */}
                <Space direction="vertical" size="large" style={{ display: 'flex' }}>
                    <Input placeholder="用户名" onChange={userNameChange} value={userName} />
                    <Input.Password placeholder="密码" onChange={userPasswordChange} value={userPassword} />
                    <div className="captchaBox" onClick={getCaptcha}>
                        <Input placeholder="验证码" onChange={captchaChange} value={captcha} />
                        <div className="captchaImg">
                            <img height="38px" src={captchaImg} alt="" />
                        </div>
                    </div>
                    <Button className='loginBtn' type="primary" block onClick={gotoLogin}>
                        登录
                    </Button>
                </Space>
                
            </div>
        </div>
    )
}

export default Login